<template>
  <div class="app-container">
    <el-form ref="ruleForm" label-position="left" :model="ruleForm" :rules="rules" class="demo-ruleForm">
      <el-row :gutter="20" type="flex" justify="space-between">

        <el-col :span="20">  <el-form-item label="模糊搜索" prop="name" label-width="80px">
          <el-input v-model="ruleForm.name" placeholder="请输入派车单号或线路查询" />
        </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="创建时间" prop="region">
            <el-date-picker
              v-model="ruleForm.date1"
              type="datetime"
              placeholder="选择日期"
            />
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="状态" prop="region">
            <el-select v-model="ruleForm.region" placeholder="请选择">
              <el-option label="提货司机待接受" value="PICKUP_DRIVER_NOACCEPTED" />
              <el-option label="提货司机执行中" value="PICKUP_DRIVER_RUNNING" />
              <el-option label="提货司机已完成" value="PICKUP_DRIVER_COMPLETED" />
              <el-option label="干线司机待接受" value="BRANCH_DRIVER_NOACCEPTED" />
              <el-option label="干线司机执行中" value="BRANCH_DRIVER_RUNNING" />
              <el-option label="干线司机已完成" value="PBRANCH_DRIVER_COMPLETED" />
              <el-option label="送货司机待接受" value="DELIVERY_DRIVER_NOACCEPTED" />
              <el-option label="送货司机执行中" value="DELIVERY_DRIVER_RUNNING" />
              <el-option label="送货司机已完成" value="DELIVERY_DRIVER_COMPLETED" />

            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="派车单类型" prop="region">
            <el-select v-model="ruleForm.region" placeholder="请选择">
              <el-option label="提货" value="TRANSPORT" />
              <el-option label="干线" value="TRUNK" />
              <el-option label="送货" value="DELIVERY" />

            </el-select>
          </el-form-item>
        </el-col>

      </el-row>

      <el-row type="flex" justify="space-between">

        <el-col>

          <el-form-item label-width="90px" label="提货城市" prop="region" style="float:left;margin-right:20px">
            <el-select v-model="ruleForm.region" placeholder="请选择提货城市">
              <el-option
                v-for="item in fromCitys"
                :key="item.fromCity"
                :label="item.fromCity"
                :value="item.fromCity"
              />

            </el-select>
          </el-form-item>
          <el-form-item label-width="90px" label="收货城市" prop="region" style="float:left;margin-right:50px">
            <el-select v-model="ruleForm.region" placeholder="请选择收货城市">
              <el-option
                v-for="item in toCitys"
                :key="item.toCity"
                :label="item.toCity"
                :value="item.toCity"
              />

            </el-select>
          </el-form-item>
          <el-button type="primary" @click="searchList">查询</el-button>
        </el-col>

      </el-row>
    </el-form>
    <el-row style="margin-bottom:20px"> <el-button type="primary" icon="el-icon-plus" @click="add">新建</el-button></el-row>
    <!--列表-->
    <el-table
 
      :data="tableData"
      :header-cell-style="headStyle"
    >

      <el-table-column
        prop="no"
        label="派车单编号"
        align="center"
      />
      <el-table-column
        label="派车单类型"
        width="100"
        align="center"
      >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.type==='TRANSPORT'" type="success">提货</el-tag>
          <el-tag v-if="scope.row.type==='TRUNK'" type="info">干线</el-tag>
          <el-tag v-if="scope.row.type==='DELIVERY'" type="warning">送货</el-tag>

        </template>

      </el-table-column>

      <el-table-column
        prop="fromCity"
        label="提货城市"
        width="100"
        align="center"
      />
      <el-table-column
        prop="toCity"
        label="收货城市"
        width="150"
        align="center"
      />
      <el-table-column
        prop="plateNumber"
        label="车牌号"
        width="100"
        align="center"
      />
      <el-table-column
        prop="destUser"
        label="司机姓名"
        align="center"
        width="120"
      />
      <el-table-column
        prop="telephone"
        label="联系电话"
        align="center"
      />
      <el-table-column
        label="状态"
        align="center"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.status==='PICKUP_DRIVER_NOACCEPTED'"> 提货司机待接受</span>
          <span v-if="scope.row.status==='PICKUP_DRIVER_RUNNING'"> 提货司机执行中</span>
          <span v-if="scope.row.status==='PICKUP_DRIVER_COMPLETED'"> 提货司机已完成</span>

          <span v-if="scope.row.status==='BRANCH_DRIVER_NOACCEPTED'">干线司机待接受</span>
          <span v-if="scope.row.status==='BRANCH_DRIVER_RUNNING'"> 干线司机执行中</span>
          <span v-if="scope.row.status==='PBRANCH_DRIVER_COMPLETED'">干线司机已完成</span>

          <span v-if="scope.row.status==='DELIVERY_DRIVER_NOACCEPTED'">送货司机待接受</span>
          <span v-if="scope.row.status==='DELIVERY_DRIVER_RUNNING'">送货司机执行中</span>
          <span v-if="scope.row.status==='DELIVERY_DRIVER_COMPLETED'">送货司机已完成</span>
        </template>

      </el-table-column>
      <el-table-column
        prop="createTime"
        label="下单时间"
        align="center"
      />
      <el-table-column
        prop="pickUpTime"
        label="计划提货时间"
        align="center"
      />
      <el-table-column
        prop="completeTime"
        label="计划完成时间"
        align="center"
      />

    </el-table>
    <!--工具条-->
    <el-row :span="24">
      <el-pagination
        style="text-align:center"
        background
        :current-page="currentPage"
        :pager-count="5"
        :page-sizes="[5, 10]"
        :page-size="query.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      headStyle: {
        background: '#E5E8EF',
        color: '#373A49'
      },
      fromCitys: [],
      toCitys: [],
      addFormVisible: false, // 新增
      currentPage: 1,
      total: 0,
      query: {
        pageNumber: 1, // 当前请求的是第几页数据
        pageSize: 10
      },
      tableData: [],
      rules: {

      }
    }
  },
  mounted() {
    this.tableList()
    this.getCitys()
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
    tableList() {
      const parm = {
        pageNumber: this.query.pageNumber,
        pageSize: this.query.pageSize
      }
      this.$api.transportList(parm).then(response => {
        this.tableData = response.data.rows
      })
    },
    add() {
      this.$router.push('/dispatch/add')
    },
    getCitys() {
      this.$api.getTransportCity().then(response => {
        this.fromCitys = response.data
      })
      this.$api.getDeliveryCity().then(response => {
        this.toCitys = response.data
      })
    },
    searchList(parm) {
      this.tableList(parm)
    },
    onSubmit() {
      this.$message('submit!')
    },
    onCancel() {
      this.$message({
        message: 'cancel!',
        type: 'warning'
      })
    }
  }
}
</script>

<style scoped>
.line{
  text-align: center;
}
</style>

